<template>
    <div class="article-two">
        <el-row :gutter="5">
            <el-col :span="6">
                <el-image style="height: 150px;width: 150px;margin: 10px 0px 10px 10px;" fit="fill"
                          :src="imgUrl"></el-image>
            </el-col>
            <el-col :span="18">
                <h3 style="margin-bottom: 0px;margin-top: 0px;">Xamarin.Forms移动开发系列4 ：XAML基础</h3>
                <div class="summary">
                    mysql连表操作后字符集不同导致索引失效，字段1是utf8mb4字符集，字段2是utf8字符集。字符集转换遵循由小到大的原则，因为utf8mb4是utf8的超集，所以这里把utf8转换成utf8mb4，即把t1.code转换成utf8mb4字符集，转换了之后，由于t1.code上面的索引仍然是utf8字符集，所以这个索引就被执行计划忽略了，然后t1表只能选择全表扫描。更糟糕的是，如果t2筛选出来的记录不止1条，那么t1就会被全表扫描多次，性能之差可想而知
                    连表操作后字符集不同导致索引失效，字段1是utf8mb4字符集，字段2是utf8字符集。字符集转换遵循由小到大的原则，因为utf8mb4是utf8的超集，所以这里把utf8转换成utf8mb4，即把t1.code转换成utf8mb4字符集，转换了之后，由于t1.code上面的索引仍然是utf8字符集，所以这个索引就被执行计划忽略了，然后t1表只能选择全表扫描。更糟糕的是，如果t2筛选出来的记录不止1条，那么t1就会被全表扫描多次，性能之差可想而知
                </div>
                <div style="font-size: 12px;float: right;margin-top: 10px;margin-right: 20px;">
                    <span class="ssp">测试分类</span>
                    <span class="ssp">2018-09-12</span>
                    <span class="ssp">111阅</span>
                    <span class="ssp">5评</span>
                    <span class="ssp">100赞</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "ArticleTwo",
        data() {
            return {
                imgUrl: require("../assets/11.jpg")
            }
        }
    }
</script>

<style scoped>


    .summary {
        color: lightslategray;
        height: 131px;
        font-size: 13px;
        text-overflow: ellipsis;
        overflow: hidden;
        /*white-space: nowrap;*/

    }

    .ssp {
        color: lightslategray;
        margin: 10px 5px 0px 5px;
    }

    .article-two {
        height: 170px;
        width: 100%;
    }

    .center {
        text-align: center;
    }
</style>